<!DOCTYPE html>
<html>
<head>
  <title>插槽</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<style type="text/css">
    .bounce-enter-active {
        animation: bounce-in .5s;
    }
    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>
<body>
    <!-- 过渡 -->
    <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>
    <script type="text/javascript">
       new Vue({
            el: '#example-2',
            data: {
                show: true
            }
        })
    </script>





    <!-- 动画 -->
    <div id="example-3">
        <button @click="show = !show">
            Toggle render
         </button>
        <transition
            name="custom-classes-transition"
            enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight"
        >
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#example-3',
            data: {
                show: true
            }
        })
    </script>
</body>
</html>